<template>
  <div class="user_box">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索框 -->
      <div style="margin-top: 15px">
        <el-input
          placeholder="请输入内容"
          v-model="pageInfo.query"
          class="usersSearch"
          clearable
          @clear="empty"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="usersSearchBtn"
          ></el-button>
        </el-input>
        <el-button type="primary" @click="addUsersBtn">添加用户</el-button>
      </div>
      <!-- tab表格 -->
      <my-table
        :data="user"
        v-model="pageInfo"
        :cols="cols"
        :total="total"
        @size="handleSizeChange"
        @current="handleCurrentChange"
      >
        <!-- vue2.6后的具名插槽  v-slot:header ,也可赋值接收属性   -->
        <template v-slot:state="{ row }">
          <el-switch @change="userStateChanged(row)" v-model="row.mg_state">
          </el-switch>
        </template>
        <template v-slot:action="{ row }">
          <!-- 编辑 -->
          <el-button
            size="mini"
            type="primary"
            @click="editUsersOk(row)"
            icon="el-icon-edit"
          ></el-button>
          <!-- 删除 -->
          <el-button
            size="mini"
            type="danger"
            @click="delUsersOK(row.id)"
            icon="el-icon-delete"
          ></el-button>
          <!-- 分配角色 -->
          <el-button
            size="mini"
            type="warning"
            @click="rightsUserBtn(row)"
            icon="el-icon-s-tools"
          ></el-button>
        </template>
      </my-table>
      <!-- <template>
        <el-table :data="user" style="width: 100%">
          <el-table-column type="index" label="日期"> </el-table-column>
          <el-table-column prop="username" label="姓名"> </el-table-column>
          <el-table-column prop="email" label="邮箱"> </el-table-column>
          <el-table-column prop="mobile" label="电话"> </el-table-column>
          <el-table-column prop="role_name" label="角色"> </el-table-column>
          <el-table-column prop="create_time" label="时间"> </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div>
                <el-switch
                  v-model="scope.row.mg_state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="userState(scope.row.id, scope.row.mg_state)"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="editUsersOk(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="delUsersOK(scope.row.id)"
              ></el-button>
              <el-button
                @click="rightsUserBtn(scope.row)"
                type="warning"
                icon="el-icon-share"
                size="mini"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template> -->
      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination> -->
    </el-card>

    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="addUserDialog" width="55%">
      <el-form
        :model="addUsersForm"
        :rules="addUsersFormRules"
        ref="addUsersFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUsersForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUsersForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUsersForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="addUsersForm.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserFormBtn('addUsersFormRef')"
            >确定</el-button
          >
          <el-button @click="addUserDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog title="编辑" :visible.sync="editUserDialog" width="55%">
      <el-form
        :model="addUsersForm"
        :rules="addUsersFormRules"
        ref="addUsersFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUsersForm.username" disabled></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUsersForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="addUsersForm.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editUserFormBtn('addUsersFormRef')"
            >确定</el-button
          >
          <el-button @click="editUserDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分配权限 -->

    <el-dialog title="分配权限" :visible.sync="rightsUserDialog">
      <el-form :model="rightsForm">
        <p>当前的用户 : {{ currentUser.username }}</p>
        <p>当前的角色 : {{ currentUser.roleName }}</p>
        <p>新角色ID : {{ rightsForm.currentRoleId }}</p>
        <el-form-item label="分配角色" label-width="100px">
          <el-select v-model="rightsForm.currentRoleId">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rightsUserDialog = false">取 消</el-button>
        <el-button type="primary" @click="rightsUserFormOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MyTable from "@/components/Table"; 
import { getUserApi, addUserApi, editUserApi, statusUserApi } from "@/http/api";
export default {
  name: "user",
  data() {
    return {
      //编辑ID
      id: 0,
      //角色列表
      roleList: [],
      //分配权限弹出对话框
      rightsUserDialog: false,
      //权限数据
      rightsForm: {},

      //编辑弹出对话框
      editUserDialog: false,
      //添加/编辑数据
      addUsersForm: {
        username: "",
        passwrod: "",
        email: "",
        mobile: "",
      },

      //添加弹出对话框
      addUserDialog: false,
      //需要分配角色
      currentUser: [],
      //每个table列配置的内容
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "姓名",
          name: "username",
        },
        {
          title: "邮箱",
          name: "email",
        },
        {
          title: "电话",
          name: "mobile",
        },
        {
          title: "角色",
          name: "role_name",
        },
        {
          title: "状态",
          slot: "state",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          width: 270,
        },
      ],
      //用户数据
      user: [],
      total: 0,
      pageInfo: {
        query: "", //查询参数
        pagenum: 1, //当前页码
        pagesize: 5, //每页显示条数
      },
      //验证
      addUsersFormRules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    //用户数据
    async getUsersList() {
      const res = await getUserApi(this.pageInfo);
      console.log(res, "用户列表数据");
      const { users, total } = res;
      this.user = users;
      this.total = total;
    },
    //点击分配权限确定按钮给那个角色分配权限
    async rightsUserFormOk() {
      console.log(this.currentUser.id, "弹出权限对话框取出的ID");
      console.log(this.rightsForm.currentRoleId, "新角色ID");
      await this.$http.roleRightsUserApi(this.currentUser.id, {
        rid: this.rightsForm.currentRoleId,
      });
      this.getUsersList();
      this.rightsUserDialog = false;
    },
    //弹出权限对话框
    async rightsUserBtn(row) {
      console.log(row);
      const { id, username, role_name: roleName } = row;
      this.currentUser = { id, username, roleName };
      this.rightsUserDialog = true;
      const res = await this.$http.getRolesApi();
      console.log(res, "角色列表数据");
      this.roleList = res;
    },

    //状态切换
    async userState(id, type) {
      const res = await statusUserApi(id, type);
      console.log(res);
    },
    //删除按钮
    async delUsersOK(id) {
      let isOk;
      try {
        isOk = await this.$confirm(
          "此操作将永久删除该文件, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
      } catch (error) {
        isOk = error;
      }
      console.log(isOk, "222222222");

      if (isOk === "confirm") {
        await this.$http.delUserApi(id);
        this.$message({
          type: "success",
          message: "删除成功!",
        });

        this.getUsersList();
      } else if (isOk === "cancel") {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      }
    },

    //编辑确定
    editUserFormBtn() {
      this.$refs.addUsersFormRef.validate(async (valid) => {
        if (!valid) return false;
        const res = await editUserApi(this.addUsersForm.id, this.addUsersForm);
        console.log(res, 1111111111);
        this.getUsersList();
        this.editUserDialog = false;
      });
    },
    //编辑数据回填
    editUsersOk(row) {
      this.editUserDialog = true;
      this.addUsersForm = JSON.parse(JSON.stringify(row));
      this.id = row.id;
    },
    //添加确定按钮
    addUserFormBtn() {
      this.$refs.addUsersFormRef.validate(async (valid) => {
        if (!valid) return false;
        const res = await addUserApi(this.addUsersForm);
        console.log(res, "用户添加");
        this.getUsersList();
        this.addUserDialog = false;
      });
    },

    //添加用户弹出对话框
    addUsersBtn() {
      this.addUserDialog = true;
    },
    //搜索
    usersSearchBtn() {
      this.getUsersList();
    },
    //清空输入框
    empty() {
      this.getUsersList();
    },
    //每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pagesize = val;
      this.getUsersList();
    },
    //当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.pagenum = val;
      this.getUsersList();
    },
  },
  mounted() {},
  created() {
    this.getUsersList();
  },
};
</script>
<style scoped lang="scss">
.usersSearch {
  width: 300px;
}
</style>
